<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="/deng/include/include-css.js"></script>
    <link href="/deng/source/css/bootlist.css" rel="stylesheet" type="text/css" />
    <title>视频信息</title>
    <style>
        .modal .modal-content .modal-header {
            padding: 5px;
        }
        .modal .modal-dialog .modal-content .modal-body {
            padding: 0px;
        }
    </style>
</head>
<body>
    <div class="m-content">
        <div class="m-portlet">
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <h3 class="m-portlet__head-text">
                            <span class="m-accordion__item-icon"><i class="flaticon-search"></i>查询区域</span>
                        </h3>
                    </div>
                </div>
            </div>
            <form class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed" method="POST" id="searchForm" onsubmit="search('datatables');return false;">
                <div class="m-portlet__body">
                    <div class="form-group m-form__group row">
                        <label class="col-form-label">视频名称：</label>
                        <div class="col-lg-2">
                            <input type="text" class="form-control" name="name" placeholder="请输入">
                        </div>
                        <label class="col-form-label">视频编号：</label>
                        <div class="col-lg-2">
                            <input type="text" class="form-control" name="device_code" placeholder="请输入">
                        </div>
                        <label class="col-form-label">生产商：</label>
                        <div class="col-lg-2">
                            <select type="text" class="form-control" name="oem_id" id="oem_id" onchange="getModelList(this.value)" placeholder="请选择">
                                <option value="">请选择</option>
                            </select>
                        </div>
                        <div class="btn-group m-btn-group" role="group" aria-label="...">
                            <a href="javascript:search('datatables')" class="btn btn-light-primary font-weight-bold mr-2">
                                <span><i class="fa fa-search"></i><span>检&nbsp;&nbsp;索</span></span>
                            </a>
                            <a href="javascript:resetAll();" class="btn btn-light-success font-weight-bold mr-2">
                                <span><i class="fa fa-repeat"></i><span>清空条件</span></span>
                            </a>
                        </div>
                    </div>
                </div>
                <!--
                <div class="m-portlet__foot m-portlet__no-border m-portlet__foot&#45;&#45;fit">
                    <div class="m-form__actions m-form__actions&#45;&#45;solid">
                        <div class="row">
                            <div class="col m&#45;&#45;align-right">
                                <a href="javascript:search('datatables')" class="btn btn-accent m-btn m-btn&#45;&#45;icon m-btn&#45;&#45;wide">
                                    <span><i class="fa fa-search"></i><span>检索</span></span>
                                </a>
                                <a href="javascript:resetAll()" class="btn btn-secondary m-btn m-btn&#45;&#45;custom m-btn&#45;&#45;icon">
                                    <span><i class="fa fa-repeat"></i><span>重置</span></span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                -->
            </form>
            <table id="datatables" class="table table-bordered table-striped table-hover" style="white-space: nowrap; width: 99.9%">
                <thead>
                <tr>
                    <th><label class="mt-checkbox mt-checkbox-single mt-checkbox-outline"><input type="checkbox" class="checkall" /><span></span></label></th>
                    <th>序号</th>
                    <th>视频类型</th>
                    <th>视频编号</th>
                    <th>视频名称</th>
                    <th>简写</th>
                    <th>生产商</th>
                    <th>创建人</th>
                    <th>创建时间</th>
                    <th>修改人</th>
                    <th>修改时间</th>
                    <th>操作</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>


    <!-- 视频播放器模态框（Modal）开始 -->
    <div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" id="videoModalDialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="videoModalLabel">
                        视频播放器
                    </h4>
                </div>
                <div class="modal-body" id="videoBody" style="overflow:auto;height:420px">
                    <!--<iframe src="" width="100%" height="100%" frameborder="0"  id="videoIframe" name="videoIframe" scrolling="yes"></iframe>-->
                    <div class="mainContainer">
                        <!--
                        说明：
                        controls：如果该选项不配置 则屏蔽loading条
                        autoplay：自动播放
                        muted：屏蔽声音
                        <video id="videoElement" class="video" controls autoplay muted>您的浏览器太旧，不支持HTML5视频。</video>
                        -->
                        <div class="loadMsg" id="loadMsg">
                            <svg version="1.1" id="dc-spinner" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="38" height="38" viewBox="0 0 38 38" preserveAspectRatio="xMinYMin meet"
                            >
                            <text x="14" y="21" font-family="Monaco" font-size="2px" style="letter-spacing:0.6" fill="grey">拼命加载中...
                                <animate  attributeName="opacity" values="0;1;0" dur="1.8s" repeatCount="indefinite"/>
                            </text>
                            <path fill="#373a42" d="M20,35c-8.271,0-15-6.729-15-15S11.729,5,20,5s15,6.729,15,15S28.271,35,20,35z M20,5.203
                            C11.841,5.203,5.203,11.841,5.203,20c0,8.159,6.638,14.797,14.797,14.797S34.797,28.159,34.797,20
                            C34.797,11.841,28.159,5.203,20,5.203z">
                            </path>

                            <path fill="#373a42" d="M20,33.125c-7.237,0-13.125-5.888-13.125-13.125S12.763,6.875,20,6.875S33.125,12.763,33.125,20
                            S27.237,33.125,20,33.125z M20,7.078C12.875,7.078,7.078,12.875,7.078,20c0,7.125,5.797,12.922,12.922,12.922
                            S32.922,27.125,32.922,20C32.922,12.875,27.125,7.078,20,7.078z">
                            </path>
                            <path fill="#2AA198" stroke="#2AA198" stroke-width="0.6027" stroke-miterlimit="10" d="M5.203,20
			                    c0-8.159,6.638-14.797,14.797-14.797V5C11.729,5,5,11.729,5,20s6.729,15,15,15v-0.203C11.841,34.797,5.203,28.159,5.203,20z">
                                <animateTransform
                                        attributeName="transform"
                                        type="rotate"
                                        from="0 20 20"
                                        to="360 20 20"
                                        calcMode="spline"
                                        keySplines="0.4, 0, 0.2, 1"
                                        keyTimes="0;1"
                                        dur="2s"
                                        repeatCount="indefinite" />
                            </path>
                            <path fill="#859900" stroke="#859900" stroke-width="0.2027" stroke-miterlimit="10" d="M7.078,20
                              c0-7.125,5.797-12.922,12.922-12.922V6.875C12.763,6.875,6.875,12.763,6.875,20S12.763,33.125,20,33.125v-0.203
                              C12.875,32.922,7.078,27.125,7.078,20z">
                                <animateTransform
                                        attributeName="transform"
                                        type="rotate"
                                        from="0 20 20"
                                        to="360 20 20"
                                        dur="1.8s"
                                        repeatCount="indefinite" />
                            </path>
                            </svg>
                        </div>
                        <video id="videoElement" class="video" autoplay muted>您的浏览器太旧，不支持HTML5视频。</video>
                    </div>
                </div>
                <div class="modal-footer" style="padding: 10px;align-items:center;justify-content: center;">
                    <form id="defaultForm" class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed" method="post">
                        <div class="btn-toolbar" role="toolbar" aria-label="...">
                            <input type="hidden" name="device_id" id="device_id">
                            <input type="hidden" name="start" id="start">
                            <input type="hidden" name="pztType" id="pztType">
                            <input type="hidden" name="ptzSpeed" id="ptzSpeed">
                            <div class="btn-group mr-2" role="group" id="ptzBase" aria-label="...">
                                <div class="btn-group" role="group">
                                    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        倍速
                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                                        <a class="dropdown-item" href="javascript:setSpeed(1)">1</a>
                                        <a class="dropdown-item" href="javascript:setSpeed(2)">2</a>
                                        <a class="dropdown-item" href="javascript:setSpeed(3)">3</a>
                                        <a class="dropdown-item" href="javascript:setSpeed(4)">4</a>
                                        <a class="dropdown-item" href="javascript:setSpeed(5)">5</a>
                                    </div>
                                    <button type="button" onmousedown="controlPTZ(1,'UP_LEFT')" title="左上" onmouseup="controlPTZ(0,'UP_LEFT')"  class="btn btn-secondary">
                                        ↖
                                    </button>
                                    <button type="button" onmousedown="controlPTZ(1,'TILT_UP')" title="向上" onmouseup="controlPTZ(0,'TILT_UP')" class="btn btn-secondary">
                                        ↑
                                    </button>
                                    <button type="button" onmousedown="controlPTZ(1,'UP_RIGHT')" title="右上" onmouseup="controlPTZ(0,'UP_RIGHT')"  class="btn btn-secondary">
                                        ↗
                                    </button>

                                    <button type="button" onmousedown="controlPTZ(1,'PAN_LEFT')" title="向左" onmouseup="controlPTZ(0,'PAN_LEFT')"  class="btn btn-secondary">
                                        ←
                                    </button>
                                    <button type="button" onmousedown="controlPTZ(1,'DOWN_LEFT')" title="左下" onmouseup="controlPTZ(0,'DOWN_LEFT')"  class="btn btn-secondary">
                                        ↙
                                    </button>

                                    <button type="button" onmousedown="controlPTZ(1,'TILT_DOWN')" title="向下" onmouseup="controlPTZ(0,'TILT_DOWN')"  class="btn btn-secondary">
                                        ↓
                                    </button>
                                    <button type="button" onmousedown="controlPTZ(1,'DOWN_RIGHT')" title="右下" onmouseup="controlPTZ(0,'DOWN_RIGHT')" class="btn btn-secondary">
                                        ↘
                                    </button>
                                    <button type="button" onmousedown="controlPTZ(1,'PAN_RIGHT')" title="向右" onmouseup="controlPTZ(0,'PAN_RIGHT')"  class="btn btn-secondary">
                                        →
                                    </button>
                                </div>
                            </div>

                            <div class="btn-group mr-2" role="group" aria-label="...">
                                <div class="btn-group btn-group-sm" role="group">
                                    <button type="button" onmousedown="controlPTZ(1,'ZOOM_IN')" title="放大" onmouseup="controlPTZ(0,'ZOOM_IN')" class="btn btn-secondary">
                                        <i class="la la-plus"></i>
                                    </button>
                                    <button type="button" onmousedown="controlPTZ(1,'ZOOM_OUT')" title="缩小" onmouseup="controlPTZ(0,'ZOOM_OUT')" class="btn btn-secondary">
                                        <i class="la la-minus"></i>
                                    </button>
                                    <button type="button" onmousedown="controlPTZ(0,'ZOOM_OUT')" title="停止转动" onmouseup="controlPTZ(0,'ZOOM_OUT')" class="btn btn-secondary">
                                        <i class="la la-pause"></i>
                                    </button>
                                </div>
                            </div>

                            <div class="btn-group mr-2" role="group" aria-label="...">
                                <div class="btn-group" role="group">
                                    <button type="button" id="transcribe" title="录屏或停止" onclick="transcribeVideo()" class="m-btn btn btn-secondary">
                                       录屏
                                    </button>
                                    <button type="button" title="截图" onclick="screenShot()" class="m-btn btn btn-secondary">
                                       截图
                                    </button>
                                </div>
                            </div>

                            <div class="btn-group mr-2" role="group" aria-label="...">
                                <a class="m-btn btn btn-secondary" href="javascript:closeWin()">
                                    <i class="la la-remove"></i>
                                    关闭
                                </a>
                            </div>
                        </div>
                    </form>
                    <!--
                    <button class="btn btn-secondary m-btn m-btn--custom m-btn--icon"  onclick="flv_start()">开始</button>
                    <button class="btn btn-secondary m-btn m-btn--custom m-btn--icon"  onclick="flv_pause()">暂停</button>
                    -->
                    <!--<button class="btn btn-secondary m-btn m-btn--custom m-btn--icon" onclick="flv_seekto()">跳转</button>-->

                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- 视频播放器模态框（Modal）结束 -->
</body>
<script type="text/javascript" src="/deng/include/include.js"></script>
<script type="text/javascript" src="/deng/view/monitor/iot-video/iot-video-list.js"></script>
<script src="/deng/source/plugins/other/flv.js/v1.5/flv.min.js"></script>
<style>
    .mainContainer {
        background-color: currentcolor;
        display: block;
        width:100%;
        height:450px;
        margin-left: auto;
        margin-right: auto;
    }
    .mainContainer .loadMsg {
        background-color: currentcolor;
        position: absolute;
        margin: 0 auto;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-perspective: 600;
        perspective: 600;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .mainContainer .loadMsg svg {
        width: 160px;
        height: 160px;
    }
    .dc-logo {
        position: fixed;
        right: 10px;
        bottom: 10px;
    }

    .dc-logo:hover svg {
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-animation: arrow-spin 2.5s 0s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
        animation: arrow-spin 2.5s 0s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    }
    .dc-logo:hover:hover:before {
        content: '\2764';
        padding: 6px;
        font: 10px/1 Monaco, sans-serif;
        font-size: 10px;
        color: #00fffe;
        text-transform: uppercase;
        position: absolute;
        left: -70px;
        top: -30px;
        white-space: nowrap;
        z-index: 20px;
        box-shadow: 0px 0px 4px #222;
        background: rgba(0, 0, 0, 0.4);
    }
    .dc-logo:hover:hover:after {
        content: 'Digital Craft';
        padding: 6px;
        font: 10px/1 Monaco, sans-serif;
        font-size: 10px;
        color: #6E6F71;
        text-transform: uppercase;
        position: absolute;
        right: 0;
        top: -30px;
        white-space: nowrap;
        z-index: 20px;
        box-shadow: 0px 0px 4px #222;
        background: rgba(0, 0, 0, 0.4);
        background-image: none;
    }

    @-webkit-keyframes arrow-spin {
        50% {
            -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
        }
    }
    @keyframes arrow-spin {
        50% {
            -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
        }
    }
    .video {
        display: block;
        width: 100%;
        height: 450px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: auto;
    }

    .alert {
        border-radius: 0;
        border-radius: 4px;
    }
    .alert {
        position: relative;
        padding: 0px;
        margin-bottom: 1rem;
        border: 1px solid transparent;
        border-radius: .25rem;
    }



    /* 隐藏播放、暂停等各类播放器功能按钮 */
    video::-webkit-media-controls-fullscreen-button {
        display: none;
    }
    video::-webkit-media-controls-play-button {
        display: none;
    }
    video::-webkit-media-controls-timeline {
        display: none;
    }
    video::-webkit-media-controls-current-time-display{
        display: none;
    }
    video::-webkit-media-controls-time-remaining-display {
        display: none;
    }
    video::-webkit-media-controls-mute-button {
        display: none;
    }
    video::-webkit-media-controls-toggle-closed-captions-button {
        display: none;
    }
    video::-webkit-media-controls-volume-slider {
        display: none;
    }
    video::-webkit-media-controls-enclosure{
        display: none;
    }

    /* 视频全铺 */
    /*.video{
        object-fit: fill;
    }*/
</style>
</html>
